<template>
    <a-row class="LoginBox">
        <a-col :md="12" :span="24">
            <div class="LogoBox"></div>
        </a-col>
        <a-col :md="12" :span="24" :style="{ backgroundColor: token.colorBgBase }">
            <div class="FormBox">
                <a-form :model="formState" name="basic" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }"
                    autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                    <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
                        <a-input v-model:value="formState.username" />
                    </a-form-item>

                    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                        <a-input-password v-model:value="formState.password" />
                    </a-form-item>

                    <a-form-item name="remember" :wrapper-col="{ offset: 5, span: 19 }">
                        <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ offset: 5, span: 19 }">
                        <a-button type="primary" block html-type="submit">登录</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </a-col>
    </a-row>
</template>

<script setup>

import { reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';

import { UseUserStore } from '../User'


import { theme } from 'ant-design-vue';

const { useToken } = theme;
const { token } = useToken();

const UserStore = UseUserStore();
const Route = useRoute();
const Router = useRouter();
const formState = reactive({
    username: import.meta.env.VITE_USERNAME,
    password: import.meta.env.VITE_PASSWORD,
    remember: true,
});
const onFinish = values => {
    UserStore.SetToken('TestToken');
    Router.push(Route.query.redirect || '/');
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};


</script>

<style lang="less" scoped>
.LoginBox {
    width: 100%;
    height: 100%;

    // display: flex
    .LogoBox {
        width: 100%;
        height: 100%;
        min-height: 200px;
        background-color: rgb(84, 62, 167)
    }

    .FormBox {
        padding: 300px 100px 0 100px
    }
}
</style>
